<template>
	<view class="content">
		<view class="option_box">
			<view class="hbh_date" @click="showDate = true">
				<text>{{startTime.substring(0,7)}}</text>
				<image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="table_box">
			<uni-table border :stripe="true" emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th width="50" align="center">编号</uni-th>
					<uni-th align="center">人员姓名</uni-th>
					<uni-th align="center">宿舍</uni-th>
					<uni-th align="center">核实状态</uni-th>
					<uni-th align="center">班级</uni-th>
					<uni-th align="center">到宿时间</uni-th>
					<uni-th align="center">说明</uni-th>
					<uni-th align="center">日期</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in stuList" :key="item.id">
					<uni-td width="50" align="center">{{index + 1}}</uni-td>
					<uni-td width="80">{{item.empName}}</uni-td>
					<uni-td width="100">{{(item.dormName?item.dormName:'') + '宿舍'}}</uni-td>
					<uni-td width="100">
						<view class="tags">
							<view class="tag" :class="item.checkState == 1 ? 'late' : 'not_backed'">
								{{item.checkState == 1 ? '已核实' : '未核实'}}
							</view>
						</view>
					</uni-td>
					<uni-td>{{item.deptName}}</uni-td>
					<uni-td>{{item.passTime}}</uni-td>
					<uni-td>{{item.memo}}</uni-td>
					<uni-td>{{item.bizTime}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="pagination_box">
			<uni-pagination :total="total" v-model="currentPage" :pageSize="pageSize" title="标题文字" prev-text="上一页"
				next-text="下一页" @change="_changePage" />
		</view>
		<custom-year-month-selector-plus v-model="showDate" @change="cusChange" />
	</view>
</template>

<script>
	import {
		dormParentList,
		dormList,
		deptList,
		lateList,
		lateSave,
		lateSaveNew,
		floorList,
		lateBack
	} from "../../common/api/index.js";
	import {
		getQueryString,
		funcUrlDel,
		parseParam,
		_showLoading
	} from '../../common/js/util.js'
	import customYearMonthSelectorPlus from '@/components/custom-year-month-selector/custom-year-month-selector-plus'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			// const currentDate = this.getDate('yesterday')
			return {
				items: ['待核实', '未归', '已归', '全部'],
				statusbarHeight: 45,
				path: null,
				applyType: 3,
				dorms: [],
				dormsIndex: 0,
				floor: [],
				floorIndex: 0,
				buildList: [],
				buildIndex: 0,
				depts: [],
				deptsIndex: 0,
				sys: [],
				sysIndex: 0,
				empId: null,
				orgId: null,
				stuList: [],
				date: currentDate,
				currentPage: 1,
				total: 20,
				editingStu: {
					id: '',
					checkState: 1,
					memo: '',
					sysCheckState: 0
				},
				param: {},
				current: 0,
				showDate: false,
				startTime: "", //开始时间
				endTime: "", //结束时间
				pageNo:1,
				pageSize:10,
			};
		},
		components: {
			customYearMonthSelectorPlus,
		},
		computed: {
			getBuildName() {
				if (this.buildList.length > 0)
					return this.buildList[this.buildIndex].text +
						(this.floor.length > 1 ? "-" + this.floor[this.floorIndex].text : '') +
						(this.dorms.length > 1 ? "-" + this.dorms[this.dormsIndex].text : '')
			},
			getDeptName() {
				if (this.sys.length > 0)
					return this.sys[this.sysIndex].text + (this.depts.length ? "-" + this.depts[this.deptsIndex]
						.text : '')
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(option) {
			this.statusbarHeight = uni.getStorageSync('SET_STATUS_BAR') * 2
			this.orgId = option.orgId
			// this.empId = option.empId
			this.startTime = this.dateFtt("yyyy-MM", new Date()) + "-01 00:00:00"
			this.endTime = this.dateFtt("yyyy-MM", new Date()) + "-" + this.mGetDate(new Date().getFullYear(),
				new Date().getMonth() + 1) + " 23:59:59"
			console.log(this.startTime)
			console.log(this.endTime)
			console.log(this.orgId)
			// console.log(this.empId)
			console.log(uni.getStorageSync("s_userId"))
			this.getHistoty()
		},
		methods: {
			mGetDate(year, mouth) {
				var date = new Date();
				var year = year ? year : date.getFullYear();
				var month = mouth ? mouth : date.getMonth() + 1;
				var d = new Date(year, month, 0);
				return d.getDate();
			},
			dateFtt(fmt, date) {
				date = new Date(date)
				var o = {
					"M+": date.getMonth() + 1, //月份 
					"d+": date.getDate(), //日 
					"h+": date.getHours(), //小时 
					"m+": date.getMinutes(), //分 
					"s+": date.getSeconds(), //秒 
					"q+": Math.floor((date.getMonth() + 3) / 3), //季度 
					"S": date.getMilliseconds() //毫秒 
				};
				if (/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (var k in o)
					if (new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr((
								"" + o[k])
							.length)));
				return fmt;
			},
			getHistoty() {
				this.total=0
				this.stuList=[]
				lateBack({
					orgId: this.orgId,
					userId:uni.getStorageSync("s_userId"),
					sysCheckState: 1,
					startTime: this.startTime,
					endTime: this.endTime,
					pageNo:this.pageNo,
					pageSize:this.pageSize
				}).then((res) => {
					console.log(res)
					if(res && res.list.length>0){
						this.total=res.total
						this.stuList=res.list
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			//////////////////////////////
			cusChange(dateValue) {
				console.log(dateValue, "------------------------")
				this.startTime=dateValue.sAndeforTime[0]
				this.endTime=dateValue.sAndeforTime[1]
				console.log(this.startTime,this.endTime)
				this.getHistoty()
			},
			_lateList() {
				_showLoading('数据加载中...')
				let params = {
					orgId: this.orgId,
					buildingId: this.buildIndex == 0 ? '' : this.buildList[this.buildIndex].value,
					sysId: this.sysIndex == 0 ? '' : this.sys[this.sysIndex].value,
					floorId: this.floorIndex == 0 ? '' : this.floor[this.floorIndex].value,
					dormId: this.dormsIndex == 0 ? '' : this.dorms[this.dormsIndex].value,
					deptId: this.deptsIndex == 0 ? '' : this.depts[this.deptsIndex].value,
					pageNum: this.currentPage,
					pageSize: 15,
					startDate: this.date,
					endDate: this.date,
				}
				if (this.current == 0) {
					params = {
						...params,
						checkState: this.current,
					}
				} else if (this.current == 1 || this.current == 2) {
					params = {
						...params,
						sysCheckState: this.current == 1 ? 0 : 1
					}
				}
				lateList(params).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.stuList = res.data.list
						this.total = res.data.total
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			_edit(stu) {
				this.editingStu = stu
				this.$refs.popup.open('top')
			},
			_checkState(e) {
				this.editingStu.sysCheckState = +e.target.value
			},
			_saveEdit() {
				lateSave({
					orgId: this.orgId,
					empId: this.editingStu.empId,
					id: this.editingStu.id,
					checkState: 1, //this.editingStu.checkState,
					sysCheckState: this.editingStu.sysCheckState,
					memo: this.editingStu.memo,
					empNo: this.param.empNo
				}).then(res => {
					if (res.code == 0) {
						this.$refs.popup.close()
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			_dormParentList() {
				dormParentList({
					orgId: this.orgId,
				}).then((res) => {
					if (res.code == 0) {
						if (res.data.length == 0) return
						this.buildList = [{
							value: 0,
							text: '选择楼栋'
						}]
						res.data.forEach(item => {
							this.buildList.push({
								value: item.dormId,
								text: item.dormName,
							})
						});
						this._buildChange({
							detail: {
								column: 0,
								value: 1
							}
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				});
			},
			_dormList(index) {
				this.dorms = [{
					value: 0,
					text: '选择宿舍'
				}]
				if (index == 0) return
				floorList({
					orgId: this.orgId,
					parentId: this.floor[index].value
				}).then(res => {
					if (res.code == 0) {

						res.data.forEach(item => {
							this.dorms.push({
								value: item.dormId,
								text: item.dormName,
							})
						});
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})
			},
			_floorList(index) {
				this.floor = [{
					value: 0,
					text: '选择楼层'
				}]
				this.dorms = [{
					value: 0,
					text: '选择宿舍'
				}]
				if (index == 0) return
				floorList({
					orgId: this.orgId,
					parentId: this.buildList[index].value
				}).then(res => {
					if (res.code == 0) {

						res.data.forEach(item => {
							this.floor.push({
								value: item.dormId,
								text: item.dormName,
							})
						});
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})
			},
			_deptList(index) {
				deptList({
					orgId: this.orgId,
					sysId: this.sys[index].value
				}).then(res => {
					if (res.code == 0) {
						this.depts = [{
							value: 0,
							text: '全部班级'
						}]
						res.data.forEach(item => {
							this.depts.push({
								value: item.deptId,
								text: item.deptName,
							})
						});
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})
			},
			_dateSelectChange(e) {
				this.date = e.target.value
				this._lateList()
			},
			_changePage(e) {
				this.currentPage = e.current
				this.pageNo=this.currentPage
				this.getHistoty()

			},
			_onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					this.currentPage = 1
					this._lateList()
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				if (type === 'yesterday') {
					day -= 1
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		width: 100vw;
		background-color: #f8f8f8;
	}

	.navigation {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		height: 90rpx;
		position: fixed;
		background-color: #FFF;
		top: 0;
		left: 0;
		right: 0;
		color: #333;
		z-index: 9999;
	}

	.back_icon {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		left: 12rpx;
	}

	.chart_box {
		margin-top: 24upx;
		padding: 0 36upx;
	}

	.option_box,
	.table_box {
		background-color: #FFF;
	}

	.hbh_date {
		background: #ccc;
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		box-sizing: border-box;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.my_box_top {
		min-height: 106rpx;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		position: relative;

		&::after {
			content: "";
			height: 1px;
			transform: scaleY(.5);
			background: #E6E6E6;
			position: absolute;
			right: 0;
			bottom: 0;
			left: 32rpx;
		}

		&:last-child::after {
			height: 0;
		}

	}

	.sel_content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.avatoa {
		display: flex;
		align-items: center;
	}

	.imgava {
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}

	.my_txt {
		font-family: PingFangSC;
		font-weight: 800;
		font-size: 30rpx;
		color: #3C424F;
	}

	.required::before {
		content: "* ";
		font-weight: 800;
		color: #FA6400;
	}

	.mytxt {
		color: rgb(199, 199, 204);
		line-height: 0;
	}

	.arrow_icon {
		display: inline-block;
		width: 48rpx;
		height: 48rpx;
	}

	.icon_right {
		display: flex;
		flex-direction: row;
		align-items: center;

		input {
			width: 160rpx;
		}
	}

	.hint {
		font-size: 30rpx;
		font-weight: 500;
		color: #ADADAD;
		line-height: 42rpx;
		margin-right: 26rpx;
	}

	.tags {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.tag {
			padding: 2rpx 6rpx;
			border: 1px solid #ccc;
			border-radius: 6rpx;
			margin-left: 12rpx;

			&.late {
				background-color: rgba(23, 206, 196, 0.2);
				border-color: rgba(13, 174, 232, 0.2);
			}

			&.leave {
				background-color: rgba(253, 201, 83, 0.2);
				border-color: rgba(252, 130, 137, 0.2);
			}

			&.not_backed {
				background-color: rgba(51, 203, 255, 0.2);
				border-color: rgba(22, 146, 228, 0.2);
			}
		}
	}

	.pagination_box {
		padding: 24rpx;
	}


	.popup_box {
		height: 680rpx;
		background-color: #FFF;
		padding: 48rpx;
		margin: 0;
		border-top-left-radius: 48rpx;
		border-top-right-radius: 48rpx;

		.popup_header {
			height: 100rpx;
			text-align: center;
		}

		.title {
			font-weight: 700;
			// line-height: 100rpx;
			font-size: 48rpx;
			color: #333;
		}

		.describe {
			font-size: 22rpx;
			color: #999;
			padding: 12rpx 0;
		}

		.popup_content {
			margin: 24rpx 0;

			.approve_opinion {
				height: 240rpx;
				width: 100%;
				border: 1px solid #ccc;
				border-radius: 12rpx;

				textarea {
					padding: 24rpx;
				}
			}
		}
	}

	.btn_box {
		height: 200rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.btn_submit {
		width: 300rpx;
		height: 96rpx;
		line-height: 96rpx;
		font-weight: 800;
		background: #999999;
		box-shadow: 0 16rpx 32rpx 0 rgba(36, 98, 255, 0.24);
		border-radius: 9rpx;
		color: #FFF;

		&.primary {
			background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
			box-shadow: 0 16rpx 32rpx 0 rgba(36, 98, 255, 0.24);
		}

		&.warning {
			background: linear-gradient(90deg, #dd524d 0%, #cb0036 100%);
			box-shadow: 0 16rpx 32rpx 0 rgba(255, 67, 89, 0.2);
		}
	}
</style>